<template>
  <view class="product-container">
    <view class="top-section">
      <image
        class="product-img"
        :src="'http://sit-store.lai-do.com/storeservice/fileStore/downloadFile.json?id=' + productObj.storeId"
        mode="aspectFill"
      ></image>
    </view>
    <view class="bottom-section">
      <view class="name-row">
        <text v-if="productObj.saleTag" class="activity">活动</text>
        <text v-if="productObj.owned" class="owner">已拥有</text>
        <text class="name">{{ productObj.name }}</text>
      </view>
      <view class="price-row">
        <view class="price-item">
          <image class="icon" src="../../static/icon_price.png" mode="aspectFill"></image>
          <text class="price">{{ productObj.discountPrice }}</text>
        </view>
        <view class="price-item origin-item">
          <image class="icon origin-icon" src="../../static/icon_price.png" mode="aspectFill"></image>
          <text class="price origin-price">{{ productObj.sellPrice }}</text>
        </view>
      </view>
      <view v-if="productObj.discountPercent" class="discount-row">
        <text class="discount">限时优惠</text>
        <text class="discount special">{{ productObj.remainTime }}</text>
        <text class="discount right">优惠 {{ productObj.discountPercent * 100 }}%</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const emit = defineEmits(['itemTap'])
const props = defineProps({
  productObj: {
    type: Object,
    default: {}
  },
  index: {
    type: Number,
    default: 0
  }
})

const itemAction = (index: number) => {
  emit('itemTap', index)
}
</script>

<style lang="scss" scoped>
.product-container {
  width: 100%;
  border-radius: 20upx;
  margin-top: 20upx;
  overflow: hidden;

  .top-section {
    width: 100%;
    height: 0;
    padding-top: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-color: #fff;

    .product-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .bottom-section {
    background-color: #fff;

    .name-row {
      padding: 20upx;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .activity {
        background-color: #fe911c;
        color: #fff;
        font-size: 20upx;
        padding: 0 10upx;
        border-radius: 5upx;
        margin-right: 10upx;
      }

      .owner {
        background-color: #a85ee7;
        color: #fff;
        margin-right: 10upx;
        font-size: 20upx;
        padding: 0 10upx;
        border-radius: 5upx;
      }

      .name {
        font-size: 26upx;
        color: #333;
      }
    }

    .price-row {
      display: flex;

      .price-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 20upx;

        .icon {
          width: 14px;
          height: 14px;
        }

        .price {
          font-size: 32upx;
          color: #333;
          margin-left: 10upx;
          font-weight: 600;
        }

        .origin-icon {
          width: 12px;
          height: 12px;
        }

        .origin-price {
          font-size: 22upx;
          color: #999;
        }
      }

      .origin-item {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          height: 3upx;
          background-color: #999;
        }
      }
    }

    .discount-row {
      padding: 20upx;

      .discount {
        color: #f23030;
        border: 1upx #f23030 solid;
        font-size: 20upx;
        border-radius: 5upx;
        padding: 0 10upx;
      }

      .special {
        border-left: none;
      }

      .right {
        margin-left: 10upx;
      }
    }
  }
}
</style>
